<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 容器|模板 -->
    <div id="app">
    <!-- 学习CSS时候，行内样式是下面写法，非动态写法 -->
    <div style="width: 300px;height: 100px;background: pink;">mingtianzhongwuchishenmo</div>


    <h1>行内样式的动态写法----对象写法</h1>
    <p v-bind:style="{width:'100px',height:'100px',color:'red'}">1111111111111111111111111111</p>


    <h1>行内样式的动态写法----数组写法</h1>
    <p :style="[obj,obj1]">2222222222222222222222222222222222222</p>


    </div>
    
    <!-- //动态行内样式写法：支持对象写法、支持数组写法。主要记忆对象写法 -->

</body>
</html>
<script>
     //关联VM
     const VM = new Vue({
         el:'#app',
         data:{
             obj:{
                 color:'pink',
                 width:'100%',
                 height:'300px',
                 background:'red'
                 
             },
             obj1:{
                 color:'green',
                 fontSize:'50px',
             }
         }
     })
</script>